<template>
    <view class="component-banner">
        <swiper
            class="swiper"
            circular
            :indicator-dots="false"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            @change="onChange"
        >
            <swiper-item v-for="(item, index) in list" :key="index">
                <view class="swiper-item" @click="clickItem(item)">
                    <image class="banner-image" :src="item.image" mode="scaleToFill" />
                </view>
            </swiper-item>
        </swiper>
        <view class="swiper-dots" v-if="indicatorDots">
            <view
                class="swiper-dot-item"
                v-for="(value, key) in list.length"
                :key="key"
                :class="{ active: key === currentIndex }"
            ></view>
        </view>
    </view>
</template>

<script>
export default {
    name: "component-banner",
    data() {
        return {
            currentIndex: 0,
        };
    },
    props: {
        indicatorDots: {
            type: Boolean,
            default: true,
        },
        autoplay: {
            type: Boolean,
            default: true,
        },
        interval: {
            type: Number,
            default: 5000,
        },
        duration: {
            type: Number,
            default: 1000,
        },
        list: {
            type: Array,
            default: [],
        },
    },
    components: {},
    created() {},
    mounted() {},
    methods: {
        onChange(e) {
            this.currentIndex = e.detail.current;
        },
        clickItem(item) {
            this.$emit("clickItem", item);
        },
    },
};
</script>

<style lang="less" scoped>
.component-banner {
    position: relative;
    width: 100%;
    height: 100%;
    .swiper,
    .swiper-item {
        width: 100%;
        height: 100%;
    }
    .swiper-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10rpx;
        text-align: center;
        .swiper-dot-item {
            display: inline-block;
            margin: 0 6rpx;
            width: 8rpx;
            height: 8rpx;
            border-radius: 50%;
            background: #cacaca;
        }
        .swiper-dot-item.active {
            background: #f9b05f;
        }
    }
    .banner-image {
        width: 100%;
        height: 100%;
    }
}
</style>